<template>
  <div id="home">
    <div class="home-body">
      <!-- 系统名称 -->
      <div class='sys-name'>{{sysName}}</div>
      <!-- 系统主体内容 -->
      <div class="sys-content">
        <!-- 系统左侧内容 -->
        <div class="left-box">
          <div class="left-top margin-bottom">
            <div class="box-title">王店镇南梅村</div>
            <div class="box-content">
              <div class="img-show-div">
                <img src="../../assets/imgs/home/1.png" />
              </div>
              <div class="dept-show-div">
                <div class="header"></div>
                <p class="position">党组织书记：陆华</p>
                <p class="honor">荣誉：省级AAA级景区村庄、市级先进基层党组织</p>
                <p class="label">标签：平安村、无讼村、清廉村居</p>
              </div>
              <div class="population-show-div">
                <div class="sex-number">
                  <span class="title">“两委”班子人数</span>
                  <span class="number male">5</span>
                  <span class="number female">1</span>
                </div>
                <div class="total-number">
                  <span class="title">总人口</span>
                  <span class="number">1992<span class="count">(522户)</span></span>
                </div>
                <div class="flow-number">
                  <span class="title">流动人口</span>
                  <span class="number">105</span>
                </div>
              </div>
            </div>
          </div>
          <div class="left-bottom">
            <div class="box-title">支部情况</div>
            <div class="box-content">
              <div class="party-member">
                <p class="title">党员人数</p>
                <div class="count">51</div>
                <p class="title">党员活动平均参与率</p>
                <div class="count participation-rate"></div>
              </div>
              <div class="party-member-baseInfo">
                <ul>
                  <li v-for="item in partyType" :key="item.title" :class="item.id === activeIndex ? 'active' : ''">{{item.title}}</li>
                </ul>
                <div class="education-echarts">
                  <Echarts :width="'100%'" :height="'100%'" :option="educationOption"></Echarts>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 系统中间内容 -->
        <div class="center-box margin-left">
          <div class="center-top margin-bottom">
            <div class="box-title">综合情况</div>
            <div class="box-content">
              <div class="comprehensive-situation" v-for="item in comprehensiveSituation" :key="item.title">
                <p class="title">{{item.title}}</p>
                <div class="value" v-if="!item.isline">{{item.value}}{{item.title === '人均可支配收入' ? '万' : ''}}</div>
                <div class="value" v-else>
                  <span class="number">{{item.value}}</span>
                  <span class='line'></span>
                  <span class="total">{{item.total}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="center-center margin-bottom">
            <div class="box-title">先锋工程测评情况</div>
            <div class="box-content">
              <Echarts :width="'100%'" :height="'100%'" :option="evaluation"></Echarts>
            </div>
          </div>
          <div class="center-bottom">
            <div class="box-title">村级集体经济</div>
            <div class="box-content">
              <Echarts :width="'100%'" :height="'100%'" :option="collectiveEconomy"></Echarts>
            </div>
          </div>
        </div>
        <!-- 系统右侧内容 -->
        <div class="right-box margin-left">
          <div class="right-top margin-bottom">
            <div class="box-title">网格三色图</div>
            <div class="box-content">
              <img src="../../assets/imgs/home/7.png" />
              <img src="../../assets/imgs/home/8.png" />
              <img src="../../assets/imgs/home/9.png" />
              <div v-for="item in grid" :key="item.title" class="info-box" :style="{top: item.top, left: item.left}">
                <p class="title">{{item.title}}</p>
                <p class="number">户籍人数：{{item.householdRegister}}</p>
                <p class="number">党员数：{{item.partyMember}}</p>
              </div>
              <div class="gird-tootip">
                <span>绿色：优秀</span>
                <span>黄色：平稳</span>
                <span>红色：较差</span>
              </div>
              <div class="gird-number">
                <span>网格：3</span>
                <span>微网格： 234</span>
              </div>
            </div>
          </div>
          <div class="right-bottom">
            <div class="box-title">发展指数</div>
            <div class="box-content">
              <div class="growth-rate">
                <p class="title">人均可支配收入增长率</p>
                <div class="count">2.1%</div>
                <p class="title">参加农村合作医疗人员占比</p>
                <div class="count">
                  <Echarts :width="'100%'" :height="'100%'" :option="personnelOption"></Echarts>
                </div>
              </div>
              <div class="university-statistics">
                <p class="title">考入大学人数</p>
                <div class="university-echarts">
                  <Echarts :width="'100%'" :height="'100%'" :option="universityOption"></Echarts>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import option from './option.js'
export default {
  data () {
    return {
      sysName: process.env.VUE_APP_SYS_CN_NAME, // 系统名称
      activeIndex: 1, // tab标签页选择索引
      partyType: [{ // tab标签数据
        id: 1,
        title: '学历'
      }, {
        id: 2,
        title: '性别'
      }, {
        id: 3,
        title: '年龄'
      }, {
        id: 4,
        title: '职业'
      }, {
        id: 5,
        title: '党龄'
      }, {
        id: 6,
        title: '发展党员'
      }],
      educationOption: {}, // 支部情况-学历option
      evaluation: {}, // 先锋工程测评情况option
      collectiveEconomy: {}, // 村级集体经济option
      personnelOption: {}, // 医疗人员占比
      universityOption: {}, // 考入大学人数option
      comprehensiveSituation: [{ // 综合情况数据
        title: '人均可支配收入',
        value: 3.6,
        isline: false
      }, {
        title: '镇(街道)中心工作排名',
        value: 6,
        total: 22,
        isline: true
      }, {
        title: '党组织书记积分排名',
        value: 15,
        total: 113,
        isline: true
      }, {
        title: '先锋工程总分',
        value: 91,
        isline: false
      }, {
        title: '先锋工程排名',
        value: 15,
        total: 113,
        isline: true
      }, {
        title: '党建联盟单位数',
        value: 3,
        isline: false
      }],
      grid: [{
        title: '第一网格',
        householdRegister: 536,
        partyMember: 11,
        top: '333px',
        left: '142px'
      }, {
        title: '第二网格',
        householdRegister: 564,
        partyMember: 16,
        top: '388px',
        left: '311px'
      }, {
        title: '第三网格',
        householdRegister: 892,
        partyMember: 24,
        top: '170px',
        left: '195px'
      }]
    }
  },
  components: {
    Echarts: () => import('@/components/echarts')
  },
  mounted () {
    this.educationOption = option([
      { value: 40, name: '初中以下' },
      { value: 14, name: '大专' },
      { value: 30, name: '高中' },
      { value: 16, name: '本科以上' }
    ]).educationOption
    this.evaluation = option().evaluation
    this.collectiveEconomy = option().collectiveEconomy
    this.personnelOption = option().personnelOption
    this.universityOption = option().universityOption
  },
  methods: {

  }
}
</script>

<style scoped="scoped" lang="scss">
  @import '@/assets/styles/scss/variable.scss';
  @import '@/assets/styles/scss/mixin.scss';
  #home{
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: url(../../assets/imgs/home/bgImg2.png) no-repeat;
    background-color: $bodyBgColor;
    background-size: 100%;
    &::before{
      content: '';
      width: 18px;
      height: 159px;
      display: inline-block;
      background: url(../../assets/imgs/home/left_right_line.png) no-repeat;
      background-size: contain;
      position: absolute;
      bottom: 57px;
      left: 0;
    }
    &::after{
      content: '';
      width: 18px;
      height: 159px;
      display: inline-block;
      background: url(../../assets/imgs/home/left_right_line.png) no-repeat;
      background-size: contain;
      position: absolute;
      bottom: 57px;
      right: 0;
    }
    .home-body{
      width: 95.573%;
      height: 1293px;
      margin: 0 auto;
      background: url(../../assets/imgs/home/bgImg.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 41px;
      margin-bottom: 23px;
      .sys-name{
        font-family: FZDHTJW--GB1-0;
        font-size: 47px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 6px;
        color: $bodyTitleColor;
        text-align: center;
        line-height: 15px;
      }
      .sys-content{
        width: auto;
        height: auto;
        padding: 92px 0 0 0;
        @include flexMixer(center, center)
        .left-box{
          width: 596px;
          .left-top, .left-bottom{
          }
          .left-top{
            @include outboxBorder(100%, 771px);
            .box-content{
              @include innerboxBorder(584px, 707px);
              padding: 29px 23px 0px;
              @include flexMixer(space-between)
              flex-wrap: wrap;
              .img-show-div{
                @include smallboxBorder(544px, 388px);
                padding: 13px;
                img{
                  width: 100%;
                  object-fit: contain;
                }
              }
              .dept-show-div{
                @include smallboxBorder(266px, 258px);
                color: $fontColor;
                .header{
                  width: 99px;
                  height: 99px;
                  background: url(../../assets/imgs/home/2.png) no-repeat;
                  background-size: 100%;
                  display: block;
                  margin: 22px auto 8px;
                }
                .position{
                  font-size: 18px;
                  font-family: PingFang;
                  font-weight: 800;
                  line-height: 23px;
                  text-align: center;
                  margin-bottom: 10px;
                }
                .honor, .label{
                  font-size: 18px;
                  font-family: PingFang;
                  font-weight: 500;
                  line-height: 19px;
                  padding: 0 19px;
                }
              }
              .population-show-div{
                @include smallboxBorder(266px, 258px);
                color: $fontColor;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                .sex-number{
                  width: 228px;
                  border-bottom: 2px solid $fontColor;
                  margin: 29px auto 0;
                  padding-bottom: 28px;
                  @include flexMixer(space-between);
                  .title{
                    font-size: 16px;
                    font-family: PingFang;
                    font-weight: bold;
                    line-height: 23px;
                    width: 100px;
                    text-align: center;
                  }
                  .number{
                    font-size: 48px;
                    font-family: PingFang;
                    font-weight: bold;
                    color: #FEFFFF;
                    line-height: 23px;
                  }
                  .male{
                    &::before{
                      content: '';
                      width: 17px;
                      height: 35px;
                      display: inline-block;
                      background: url(../../assets/imgs/home/3.png) no-repeat;
                      background-size: 100%;
                      margin-right: 7px;
                    }
                  }
                  .female{
                    &::before{
                      content: '';
                      width: 17px;
                      height: 35px;
                      display: inline-block;
                      background: url(../../assets/imgs/home/4.png) no-repeat;
                      background-size: 100%;
                      margin-right: 7px;
                    }
                  }
                }
                .total-number, .flow-number{
                  width: 114px;
                  height: 118px;
                  text-align: center;
                  vertical-align: top;
                  .title{
                    font-size: 19px;
                    font-family: PingFang;
                    line-height: 23px;
                    display: block;
                    padding: 21px 0 12px 0;
                  }
                  .number{
                    font-size: 34px;
                    font-weight: bold;
                    color: #FEFFFF;
                    display: block;
                    height: 49px;
                    line-height: 49px;
                    .count{
                      display: block;
                      color: #FEFFFF;
                      font-size: 19px;
                    }
                  }
                }
                .total-number{
                  border-right: 2px solid $fontColor;
                  .number{
                    line-height: 25px;
                  }
                }
              }
            }
          }
          .left-bottom{
            @include outboxBorder(100%, 375px);
            .box-content{
              @include innerboxBorder(584px, 312px);
              @include flexMixer(space-around);
              .party-member{
                height: 100%;
                padding-top: 7px;
                .title{
                  font-size: 19px;
                  font-family: PingFang;
                  font-weight: 800;
                  color: $fontColor;
                  text-align: center;
                  margin-bottom: 10px;
                }
                .count{
                  @include smallboxBorder(187px, 106px);
                  font-size: 81px;
                  font-family: PingFang;
                  font-weight: 800;
                  text-align: center;
                  line-height: 106px;
                  margin-bottom: 14px;
                }
                .participation-rate{
                  font-size: 20px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #D8E9FF;
                  @include flexMixer(center, center);
                  &::before{
                    content: '80%';
                    width: 90px;
                    height: 90px;
                    display: inline-block;
                    background: url(../../assets/imgs/home/5.png) no-repeat, url(../../assets/imgs/home/6.png) no-repeat;
                    background-size: 100%;
                  }
                }
              }
              .party-member-baseInfo{
                width: 337px;
                ul{
                  margin-top: 7px;
                  li{
                    display: inline-block;
                    color: $fontColor;
                    font-size: 16px;
                    text-align: center;
                    border: 1px solid $fontColor;
                    padding: 3px 8px;
                    margin-right: -1px;
                  }
                }
                .active{
                  background-color: #54C1DF;
                  color: #fff;
                }
                .education-echarts{
                  @include smallboxBorder(340px, 253px);
                  margin-top: 8px;
                }
              }
            }
          }
        }
        .center-box{
          width: 558px;
          .center-top{
            @include outboxBorder(100%, 327px);
            .box-content{
              @include innerboxBorder(551px, 271px);
              @include flexMixer(space-around, center);
              flex-wrap: wrap;
              padding-top: 6px;
              .comprehensive-situation{
                .title{
                  font-size: 15px;
                  font-family: Adobe Heiti Std;
                  color: $fontColor;
                  text-align: center;
                  padding: 6px 0 10px 0;
                }
                .value{
                  @include smallboxBorder(160px, 90px);
                  font-size: 40px;
                  font-family: PingFang;
                  font-weight: 500;
                  color: #FFFFFF;
                  text-align: center;
                  line-height: 85px;
                  position: relative;
                  display: flex;
                  justify-content: center;
                  span{
                    display: inline-block;
                  }
                  .number{
                    @include positionMixer(relative, auto, -15px)
                  }
                  .line{
                    width: 4px;
                    height: 69px;
                    background-color: $fontColor;
                    transform: rotate(15deg);
                    margin: 10px 10px 0;
                    display: inline-block;
                  }
                  .total{
                    color: $fontColor;
                    font-size: 40px;
                    font-weight: 500;
                    @include positionMixer(relative, auto, auto, auto, -15px)
                  }
                }
              }
            }
          }
          .center-center{
            @include outboxBorder(100%, 421px);
            .box-content{
              @include innerboxBorder(551px, 354px);
            }
          }
          .center-bottom{
            @include outboxBorder(100%, 375px);
            .box-content{
              @include innerboxBorder(551px, 312px);
            }
          }
        }
        .right-box{
          width: 551px;
          .right-top{
            @include outboxBorder(100%, 771px);
            .box-content{
              @include innerboxBorder(543px, 703px);
              position: relative;
              $position: (width: 463px, height: 234px, top: 68px, left: 43px),
              (width: 206px, height: 225px, top: 246px, left: 96px),
              (width: 318px, height: 277px, top: 285px, left: 128px);
              @for $i from 1 through length($position) {
                $item: nth($position, $i);
                img:nth-child(#{$i}) {
                  width: map-get($item, width);
                  height: map-get($item, height);
                  position: absolute;
                  top: map-get($item, top);
                  left: map-get($item, left);
                }
              }
              .info-box{
                position: absolute;
                .title{
                  color: #000;
                  font-size: 23px;
                  text-shadow: 0px 2px 6px rgba(162, 121, 0, 1);
                }
                .number{
                  font-size: 18px;
                  color: #fff;
                  text-shadow: 2px 0px 6px rgba(162, 121, 0, 1);
                }
              }
              $color: rgba(87, 128, 68, 1) rgba(200, 190, 80, 1) rgba(156, 75, 56, 1);
              @each $c in $color {
                $index: index($color, $c);
                .gird-tootip{
                  width: 100%;
                  text-align: center;
                  position: absolute;
                  bottom: 80px;
                  span:nth-child(#{$index}) {
                    color: $c;
                    font-size: 19px;
                    @if $index <= 2 {
                      margin-right: 20px;
                    }
                  }
                }
              }
              .gird-number{
                width: 100%;
                text-align: center;
                position: absolute;
                bottom: 44px;
                font-size: 23px;
                span:nth-child(1){
                  margin-right: 30px;
                }
              }
            }
          }
          .right-bottom{
            @include outboxBorder(100%, 375px);
            .box-content{
              @include innerboxBorder(543px, 312px);
              @include flexMixer(space-around);
              .growth-rate{
                height: 100%;
                padding-top: 7px;
                .title{
                  font-size: 19px;
                  font-family: PingFang;
                  font-weight: 800;
                  color: $fontColor;
                  text-align: center;
                  margin-bottom: 10px;
                }
                .count{
                  @include smallboxBorder(237px, 106px);
                  font-size: 50px;
                  font-family: PingFang;
                  font-weight: 800;
                  text-align: center;
                  line-height: 106px;
                  margin-bottom: 14px;
                }
              }
              .university-statistics{
                .title{
                  font-size: 19px;
                  font-family: PingFang;
                  font-weight: 800;
                  color: $fontColor;
                  text-align: center;
                  margin-bottom: 10px;
                }
                .university-echarts{
                  @include smallboxBorder(278px, 269px);
                }
              }
            }
          }
        }
      }
    }
  }
</style>
